<template>
  <div class="courseAudit-box">
    <div class="title">
      课程审核
    </div>
    <el-table
      ref="multipleTable"
      :data="auditList"
      tooltip-effect="dark"
      style="width: 100%"
      :default-sort="{prop: 'member.memberType', order: 'descending'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        prop="course.name"
        label="课程名称"
        width="115"
        align="center"
      />
      <el-table-column
        prop="course.classifyId"
        label="课程分类"
        width="115"
        align="center"
      >
        <template slot-scope="scope">
          <div>
            {{ classifyList[scope.row.course.classifyId-1].name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="课程级别"
        width="115"
        align="center"
      >
        <template slot-scope="scope">
          <div>
            {{ levelList[scope.row.course.levelId-1].name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="课程类型"
        width="115"
        align="center"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.course.type===0?'免费':'收费' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="文章大纲"
        width="115"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="text" style="color: #409EFF;" @click="goOutline(scope.row)">
            课程大纲
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="会员级别"
        width="115"
        align="center"
        sortable
        prop="member.memberType"
      >
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.member.memberType==='2'" class="item" effect="dark" content="全部权限优先" placement="top">
            <div style="color: #67C23A;">超级VIP</div>
          </el-tooltip>
          <el-tooltip v-else-if="scope.row.memberType==='1'" class="item" effect="dark" content="部分权限优先" placement="top">
            <div style="color: #409EFF;">普通VIP</div>
          </el-tooltip>
          <el-tooltip v-else class="item" effect="dark" content="无任何权限" placement="top">
            <div style="color: #909399;">普通用户</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="auditTime"
        label="提交审核时间"
        width="180"
        align="center"
        sortable
      />
      <el-table-column
        label="操作"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="getMinioInfo(scope.row.userMinioURL)">
            用户信息
          </el-button>
          <el-button type="text" @click="getMinioInfo(scope.row.courseMinioURL)">
            课程信息
          </el-button>
          <el-button type="text" style="color:#67C23A">
            审核通过
          </el-button>
          <el-button type="text" style="color:#F56C6C">
            审核失败
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import http_audit from '@/api/audit'
export default {
  name: 'CourseAudit',
  data() {
    return {
      // 显示的数据 course.name\course.description\course.classifyId\course.person
      // 查看课程大纲\user.username\member.memberType\auditTime\操作
      // 文章审核的全部信息
      auditList: [],
      // 课程分类信息
      classifyList: [],
      // 课程等级信息
      levelList: []
    }
  },
  created() {
    this.getAuditList()
    this.getUserClassifyAndLevelList()
  },
  methods: {
    // 获得文章审核的信息
    async getAuditList() {
      const result = await http_audit.getAuditAll()
      if (result.code === 200) {
        this.auditList = result.data
      }
    },
    async getUserClassifyAndLevelList() {
      const result = await http_audit.getUserClassifyAndLevelList()
      if (result.code === 200) {
        this.classifyList = result.data.classifyList
        this.levelList = result.data.LevelList
      }
    },
    // 表格函数
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 表格函数
    // 查看minio生成的用户/课程信息
    getMinioInfo(url) {
      window.open(url, '_blank')
    },
    // 跳转到课程大纲
    goOutline(row) {
      this.$router.push({
        path: '/audit/course/outline',
        query: row.outlineResultList
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.courseAudit-box{
  padding: 20px;
  .title{
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 20px;
  }
}
</style>
